<template>
    <div class="options-panel">
        <div v-show="currentPanel == 'property'">
            <div class="panel-from">
                <div class="panel-form-item check">
                    <div class="item-label">隐藏</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.hidden" />
                    </div>
                </div>

                <a-divider orientation="left">标签页配置</a-divider>
                <div class="option-list-wrap">
                    <ul class="option-list">
                        <li v-for="(childItem, index) in selectItem.children" class="option-lsit-item">
                            <a-input v-model:value="childItem.label" style="width: 80%" />
                            <CloseCircleFilled class="delete-btn" title="删除标签页" @click="deleteTab(index)" />
                        </li>
                    </ul>
                    <a-button type="primary" size="small" @click="addTab">新增标签页</a-button>
                </div>
            </div>
        </div>
        <div v-show="currentPanel == 'style'">
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
    currentPanel: {
        type: String,
        default: "property"
    },
    selectItem: {
        type: Object,
    }
})

/**
 * @method
 * @param {String} index 需要删除的列下标 
 * @desc 删除列
 */
const deleteTab = (index) => {
    props.selectItem.children.splice(index, 1);
}

/**
 * @method
 * @desc 新增选项
 */
const addTab = () => {
    let length = props.selectItem.children.length;
    props.selectItem.children.push({
        type: "tabPane",
        name: `标签页${length + 1}`,
        label: `标签页${length + 1}`,
        children: [],
        key: `tab${length + 1}`,
    },)
}

</script>
<style lang="less" scoped>
</style>